<template>
  <div id="box">
    <div class="avatar">
      <img
        :src="state.avatar"
        alt=""
        style="width: 80px; height: 120px; border-radius: 30px; margin-left:20px"
      />
    </div>
    <div class="message">
      <h3 style="margin: 0">{{ state.nickname }}</h3>
      <span class='pont' style='color:#67C23A'>●</span><span style = 'font-size:12px;color:#909399'>{{state.userState}}</span>
      <h5 style="color: #909399">
        {{ state.area }} | {{ state.age }}岁 | {{ state.height }}cm <br />
        {{ state.motto }}
      </h5>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  setup() {
    const state = reactive({
      userId: "0",
      avatar: "../../public/1.webp",
      nickname: "卢本伟",
      userState: "on-line",
      area: "陕西 西安",
      age: 12,
      height: 180,
      motto: "哥只是个传说",
    });
    const stateChange = (val) => {
      if( val == 'on-line') {
        state.userState = '在线'
      }else {
        state.userState = '离线'
      }
    }
    stateChange(state.userState)
    return {
      state,
    };
  },
};
</script>

<style scoped>
#box {
  margin-top: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  display: flex;
}
.message {
  margin-left: 20px;
}
</style>